<template>
	<div class="content-list">
		<uv-sticky>
			<text class="header">共核销56笔</text>
			<div class="bottom" @click="openPicker">
				<div class="show-time" >{{ dateStr }} <img src="../static/image/dropdown.png" alt="" style="width: 60rpx;height: 60rpx;" /></div>
				<div class="tj">
					共5笔
				</div>
			</div>
		</uv-sticky>
		<div style="margin-top: 30rpx">
			<uv-list>
				<uv-list-item border v-for="item in dataSource" :title="item.name" :note="item.date" :rightText="item.tel"> </uv-list-item>
			</uv-list>
		</div>
		<uv-datetime-picker ref="datetimePicker" :minDate="1587524800000" :maxDate="1786778555000" v-model="datetime" mode="year-month" @confirm="confirm"> </uv-datetime-picker>
	</div>
</template>
<script>
export default {
	data() {
		return {
			dateStr: "2024年5月",
			datetime: "",
			dataSource: [],
		};
	},
	watch: {},
	mounted() {
		for (let index = 0; index < 10; index++) {
			this.dataSource.push({
				name: "张大大",
				id: "415215451321313213213",
				tel: "15894526541",
				date: "5月8日 12:22",
			});
		}
	},
	onReady() {
		// console.log(this.formatter);
		// this.$refs.datetimePicker.setFormatter(this.formatter)
		// console.log(this.$refs.datetimePicker);
	},
	onReachBottom() {
		this.dateStr = "2024年6月";
		for (let index = 0; index < 20; index++) {
			this.dataSource.push({
				name: "李青林",
				id: "415215451321313213213",
				tel: "15894526541",
				date: `6月${index + 1}日 12:22`,
			});
		}
	},
	methods: {
		turnStr(time) {
			let date = new Date(time);
			return date.getFullYear() + "年" + date.getMonth() + "月";
		},
		formatter(type, value) {
			console.log(type);
			if (type === "year") {
				return `${value}年`;
			}
			if (type === "month") {
				return `${value}月`;
			}
			if (type === "day") {
				return `${value}日`;
			}
			return value;
		},
		openPicker() {
			this.$refs.datetimePicker.open();
		},
		confirm(e) {
			console.log(e);
			if (e.value) {
				this.dateStr = this.turnStr(e.value);
				this.dataSource = [
					{
						name: "李青林",
						id: "415215451321313213213",
						tel: "15894526541",
						date: `12:22`,
					},
				];
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.content-list {
	padding: 0 32rpx 50px 32rpx;
	.header {
		font-size: 40rpx;
		background: white;
		padding: 20rpx 0;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 54.88rpx;
		color: rgba(30, 33, 33, 1);
	}
	.bottom {
		background: white;
		display: flex;
		padding-bottom: 20rpx;
		justify-content: space-between;
		align-items: center;
		.show-time {
			color: rgba(30, 33, 33, 1);
			display: flex;
			align-items: center;
		}
		.tj {
			color: rgba(30, 33, 33, 0.4);
		}
	}
}
</style>
